<template>
  <div>
    <div v-for="(menu,i) in menus" :key="i">
      <el-menu-item v-if="menu.children.length == 0" :index="resolvePath(menu.path)">
        <svg-icon :icon-class="menu.meta.icon"/>
        <span slot="title" style="padding-left: 20px">{{ menu.meta.title }}</span>
      </el-menu-item>
      <el-submenu v-else :index="resolvePath(menu.path)">
        <template slot="title">
          <svg-icon :icon-class="menu.meta.icon"/>
          <span slot="title" v-show="!isCollapse" style="padding-left: 20px">{{ menu.meta.title }}</span>
        </template>
        <menu-item :menus="menu.children" :isCollapse="false" :basePath="resolvePath(menu.path)"></menu-item>
      </el-submenu> 
    </div>
  </div>
</template>
<script>
import path from "path"
export default {
  name: "MenuItem",
  data() {
    return {};
  },
  props: {
    menus: {
      type: Array,
      required: true,
    },
    basePath: {
      type: String,
      default: ''
    },
    isCollapse: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    value() {
      return this.$route.path;
    },
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    },
    resolvePath(routePath) {
      if (routePath==""){
        return this.basePath+"/"
      }
      if (this.isExternal(routePath)) {
        return routePath
      }
      if (this.isExternal(this.basePath)) {
        return this.basePath
      }
      return path.resolve(this.basePath,routePath)
    },
    isExternal(path) {
        return /^(https?:|mailto:|tel:)/.test(path)
    }
  },
};
</script>

<style lang="css" scoped>
.menu {
  height: 100%;
  width: 201px;
}
</style>
